<template>
  <ul class="app-header-nav">
    <li class="home"><RouterLink to="/">首页</RouterLink></li>
    <li v-for="item in $store.state.category.list" :key="item.name">
        <!-- active-class="active" 激活的时候加上active类名 -->
      <RouterLink
        active-class="active"
        v-if="item.id"
        :to="`/category/${item.id}`"
      >
        {{ item.name }}
      </RouterLink>
      <a v-else href="javascript:;">{{ item.name }}</a>
    </li>
  </ul>
</template>

<script>
// 1. 渲染nav中的一级分类
// 1.1 在API层，定义接口函数
// 1.2 在vuex的category模块，定义mutations函数和actions函数
// 1.3 Layout组件调用
// 1.4 当前组件拿出vuex中数据，进行渲染即可
// 2. 优化初始化无数据展示（局部白屏）
// 2.1 定义9个分类的常量数据
// 2.2 在vuex状态初始化的时候，使用常量数据（和后台数据结构一致）
// 2.3 在没有加载数据的时候可以看到分类，没有加载完数据不让点击
export default {
  // 模板中使用位置如果有多个，可以使用计算属性优化
  name: "app-header-nav",
};
</script>

<style scoped lang="less">
.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
        // 当a链接上有active的时候会有激活样式
      &.active {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
    &:hover {
      a {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
  }
}
</style>
